<script setup
        lang="ts">
import {getArticlesApi, addOrUpdateArticleApi, deleteArticleByIdApi} from '../../apis/article'
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import {api as viewerApi} from "v-viewer";
import { Check, Close } from '@element-plus/icons-vue'

const articleList = ref([])
const isEditMode = ref(true)
const $router = useRouter();
onMounted(async () => {
  articleList.value = (await getArticlesApi()).data
})

/**
 * 操作栏:预览按钮
 *  预览文章
 * @param id 要预览的文章id
 */
const handlePreviewArticle=(id)=>{
  console.log('预览文章',id)
}

/**
 * 预览封面预览图片
 * @param url
 */
const handlePreviewImage = (url) => {
  viewerApi({
    options: {
      toolbar: true,
      initialViewIndex: 0
    },
    images: [url],
  })
}

/**
 *  操作栏:是否删除的Switch按钮
 * @param row
 * @returns {Promise<void>}
 */
const onDeleteChange=async (row)=>{
  await deleteArticleByIdApi(row.id, row.deleted)

}

/**
 *  操作栏:编辑按钮
 * @param articleId 要编辑的文章id
 */
const handleEdit = (articleId) => {
  $router.push({path: '/article/edit', query: {articleId: articleId, isEditMode: true}})
}

/**
 * 表头添加数据或者是否可见的修改
 * @param article
 * @returns {Promise<void>}
 */
const handleSaveOrUpdate = async (article) => {
  await addOrUpdateArticleApi(article)
}
</script>

<template>
  <el-button type="primary"
             @click="$router.push({path:'/article/edit',query:{isEditMode:false}})">添加
  </el-button>


  <el-table show-overflow-tooltip
            :data="articleList">
    <el-table-column
        type="index"
        fixed="left"
        width="60"
        label="序号">
    </el-table-column>
    <el-table-column
        prop="userName"
        fixed="left"

        label="作者">
    </el-table-column>
    <el-table-column
        prop="sortName"
        fixed="left"

        label="分类">
    </el-table-column>
    <el-table-column
        fixed="left"
        prop="labelName"
        label="标签">
    </el-table-column>
    <el-table-column
        prop="articleCover"
        :show-overflow-tooltip="false"
        label="封面">
      <template #default="{row}">
        <el-image style="width: 60px; height: 60px"
                  :src="row.articleCover"
                  @click="handlePreviewImage(row.articleCover)"
                  fit="fill"/>

      </template>
    </el-table-column>
    <el-table-column
        prop="articleTitle"
        label="标题">
    </el-table-column>
    <el-table-column
        prop="viewCount"
        label="浏览量">
    </el-table-column>
    <el-table-column
        prop="likeCount"
        label="点赞量">
    </el-table-column>

    <el-table-column
        prop="createTime"
        label="创建时间">
    </el-table-column>
    <el-table-column
        prop="updateTime"
        label="修改时间">
    </el-table-column>
    <el-table-column
        prop="updateBy"
        fixed="right"
        label="修改人">
    </el-table-column>
    <el-table-column
        prop="deleted"
        label="是否可见">
      <template #default="{row}">
        <el-switch
            v-model="row.viewStatus"
            @change="handleSaveOrUpdate(row)"
            inline-prompt
            :disabled="row.deleted===1"

            :active-icon="Check"
            :inactive-icon="Close"
            :active-value="1"
            :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column
        prop="deleted"
        label="是否可评论">
      <template #default="{row}">
        <el-switch
            v-model="row.commentStatus"
            @change="handleSaveOrUpdate(row)"
            inline-prompt
            :disabled="row.deleted===1||row.viewStatus===0"

            :active-icon="Check"
            :inactive-icon="Close"
            :active-value="1"
            :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column
        prop="deleted"
        label="是否删除">
      <template #default="{row}">
        <el-switch
            v-model="row.deleted"
            @change="onDeleteChange(row)"
            inline-prompt
            :active-icon="Check"
            :inactive-icon="Close"
            :active-value="1"
            :inactive-value="0"
        />
      </template>
    </el-table-column>


    <el-table-column fixed="right"
                     label="Operations"
                     width="120">
      <template #default="{row}">
        <div class="func-group">

          <el-button link
                     type="primary"
                     size="small"
                     @click="handlePreviewArticle(row.id)">
            预览
          </el-button>
          <el-button link
                     type="primary"
                     size="small"
                     :disabled="row.deleted===1"
                     @click="handleEdit(row.id)">编辑
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped
       lang="scss">
.func-group {
  display: flex;
}
</style>
